<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .child {
                width: 600px;
                height: 400px;
                background: lightskyblue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button @click="showChild">显示子组件</button>
            <child v-show="type" @lmy="changeType"></child>
        </div>
        <script src="js/vue.js"></script>
        <script>
            let child = {
                template: `<div class="child">我是子组件，我在蓝色的海洋里！
                                <button @click="change">点击隐藏子组件</button>
                           </div>`,
                methods:{
                    change(){
                        this.$emit('lmy',false)
                    }
                }
            }

            let vm = new Vue({
                el: '#app',
                data: {
                    type:false
                },
                components: {
                    child
                },
                methods: {
                    showChild(){
                        this.type=true;
                    },
                    changeType(data){
                        this.type=data;
                    }
                }
            })
        </script>
    </body>
</html>